Description

Use Canonical react components instead of having custom html components.

Rationale

This change allows:

• Using clever behaviors from those components like password validation.
• Standardisation with the ecosystem of Canonical app
• Reducing lines of code. Here most of the added code is in the package.json, the net change is closer to -400
• Less time spent figuring out Canonical layout

I believe now's the right time to do this change before this project grows.

Visual Improvements

This change comes with some visual improvements.

In each image:

• Left: Current
• Right: Proposed

Better login and initialization pages

Instead of coding our own layout and logic for the login and initialization pages, we now use canonical's LoginPageLayout which reduces the amount of code by a bunch and looks nice.

A show CSR content action

We removed the additional action button that shows certificate content and replaced it with an additional action in the action menu named "Show CSR Content". This leverages Canonical MainTable's expanded row feature instead of coding our own.

Better input validation visuals

We leverage the "error" parameter in Input components automatically rendering the boxes red and using the appropriate icon instead of coding our own logic. It also looks nicer.

What's next?

Yes, there are more aspects of the code that could be converted to using react components. Here I did a large first batch of changes. There will be more to come, namely:

• The App Navigation
• Asides

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• I have added tests that validate the behaviour of the software
• I validated that new and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules